<template>
	<div class="app-container" :style="{height:cheight-90+'px'}">
		<el-form :model="queryParams" ref="queryForm" :inline="true">
			<el-row>
				<el-col :span="4">
					<!--<el-form-item label="车辆" prop="vehicleLicence">
						 <el-select filterable v-model="queryParams.vehicleLicence" placeholder="请选择车辆" clearable
							size="small" style="width: 100%" disabled>
							<el-option v-for="vehicle in vehicleOptions" :key="vehicle.licence" :label="vehicle.licence"
								:value="vehicle.licence" />
						</el-select> 
					</el-form-item>-->
					<el-form-item label="车辆号">
						{{parm.batNo}}
						<el-button type="primary" size="mini" @click="openbat">选择车辆</el-button>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="" prop="dateRange">
						<el-date-picker v-model="dateRange" size="small" style="width: 100%"
							value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-"
							start-placeholder="请选择开始时间" end-placeholder="请选择结束时间" :picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="轨迹速度">
						<el-slider v-model="speed" style="width: 200px" :step="1"></el-slider>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item style="float: right">
						<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<baidu-map style="height:100%;width:100%" :center="center" :zoom="18" :scroll-wheel-zoom="true">
			<bm-polyline :path="path" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="3" :editing="false">
			</bm-polyline>
			<bm-marker :position="{lng: startMark.lng, lat: startMark.lat}"></bm-marker>
			<bm-marker :position="{lng: endMark.lng, lat: endMark.lat}"></bm-marker>
			<bml-lushu @stop="reset" :path="path" :icon="icon" :play="play" :rotation="true" :speed="speed * 10"
				:infoWindow="true" :content="content">
			</bml-lushu>
		</baidu-map>
		<batlist ref="batlist" @selebatno="selebatno" />
	</div>
</template>

<script>
	//百度地图
	import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
	import BmScale from 'vue-baidu-map/components/controls/Scale'
	import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
	import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
	import BmMarker from 'vue-baidu-map/components/overlays/Marker'
	import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
	import batlist from '../capacity/bat_list.vue'
	import {
		BmlLushu
	} from 'vue-baidu-map'
	import {
		getBatInfoGps
	} from './map.js'
	import drugMarkerIcon from '@/assets/icons/img/b.png'

	export default {
		components: {
			BaiduMap,
			BmScale,
			BmNavigation,
			BmMarkerClusterer,
			BmMarker,
			BmInfoWindow,
			BmlLushu,
			batlist
		},
		props: {},
		data() {
			var year = new Date().getFullYear();
			var month = new Date().getMonth() + 1;
			var day = new Date().getDate();
			month = month<10?'0'+month:month;
			day = day<10?'0'+day:day;
			var nday = year+"-"+month+"-"+day;
			return {
				cheight: document.documentElement.clientHeight,
				// 查询参数
				queryParams: {
					vehicleLicence: undefined
				},
				// 日期范围
				dateRange: [nday+' 00:00:00', nday + ' 23:59:59'],
				play: false,
				path: [],
				center: {
					lng: 120.00401,
					lat: 31.880425
				},
				startMark: {},
				endMark: {},
				icon: {
					url: drugMarkerIcon,
					size: {
						width: 32,
						height: 32
					},
					opts: {
						anchor: {
							width: 15,
							height: 30
						}
					}
				},
				content: undefined,
				speed: 50,
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6
					}
				},
				parm: {
					"batNo": "速度:45KM/H",
					"beginTime": "",
					"endTime": "",
					"pageIndex": 1,
					"pageSize": 10,
					"typeList": []
				},
				pinlist:[{
						longitude: 120.006355,
						latitude: 31.879122
					},
					{
						longitude: 120.006346,
						latitude: 31.878969
					},
					{
						longitude: 120.002932,
						latitude: 31.879053
					},
					{
						longitude: 120.000749,
						latitude: 31.879152
					},
					{
						longitude: 120.000848,
						latitude: 31.88067
					},

					{
						longitude: 120.000902,
						latitude: 31.88172
					},
					{
						longitude: 120.003345,
						latitude: 31.881621
					},
					{
						longitude: 120.00754,
						latitude: 31.881498
					},
					{
						longitude: 120.007433,
						latitude: 31.880015
					},

					{
						longitude: 120.007451,
						latitude: 31.880072
					},
					{
						longitude: 120.007343,
						latitude: 31.87893
					},
					{
						longitude: 120.006328,
						latitude: 31.878969
					}


				 ],
				// vehicleOptions: [{
				// 	licence: '智一测试车辆'
				// }]
			}
		},
		methods: {
			openbat() {
				this.$refs.batlist.open();
			},
			//选择
			selebatno(e) {
				console.log(e);
				this.parm.batNo = e.batNo;
				setTimeout(() => {
					this.getBatInfoGps();
				}, 500)
			},
			//获取经纬度
			async getBatInfoGps() {
				// console.log(this.dateRange);
				this.parm.beginTime = this.dateRange[0];
				this.parm.endTime = this.dateRange[1];
				let res = await getBatInfoGps(this.parm);
				console.log(res);
				if (res.code == 1) {
					this.pinlist = res.obj;
				}
			},
			reset() {
				this.play = false
			},
			handleSearchComplete(res) {
				this.path = res.getPlan(0).getRoute(0).getPath()
			},
			handleQuery() {
				//const search = this.addDateRange(this.queryParams, this.dateRange)
				// if (this.queryParams.vehicleLicence === undefined) {
				// 	this.msgError('请选择车辆')
				// 	return
				// }
				// if (search.beginTime === undefined || search.beginTime === '' || search.endTime === undefined || search
				// 	.endTime === '') {
				// 	this.msgError('请选择查询时间')
				// 	return
				// }
				//轨迹

				this.pinlist = [{
						longitude: 120.006355,
						latitude: 31.879122
					},
					{
						longitude: 120.006346,
						latitude: 31.878969
					},
					{
						longitude: 120.002932,
						latitude: 31.879053
					},
					{
						longitude: 120.000749,
						latitude: 31.879152
					},
					{
						longitude: 120.000848,
						latitude: 31.88067
					},

					{
						longitude: 120.000902,
						latitude: 31.88172
					},
					{
						longitude: 120.003345,
						latitude: 31.881621
					},
					{
						longitude: 120.00754,
						latitude: 31.881498
					},
					{
						longitude: 120.007433,
						latitude: 31.880015
					},

					{
						longitude: 120.007451,
						latitude: 31.880072
					},
					{
						longitude: 120.007343,
						latitude: 31.87893
					},
					{
						longitude: 120.006328,
						latitude: 31.878969
					}


				 ];
				let length = this.pinlist.length
				let middle = -1
				if (length % 2 === 0) {
					middle = length / 2 + 1
				} else {
					middle = (length + 1) / 2
				}
				this.pinlist.forEach(item => {
					let obj = {
						lng: item.longitude,
						lat: item.latitude
					}
					this.path.push(obj)
				})
				this.center = this.path[middle]
				this.startMark = this.path[0]
				this.endMark = this.path[this.path.length - 1]
				this.content = this.parm.batNo
				this.play = true
				// selectGpsOrbitList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
				// 	if (response.data.length <= 0) {
				// 		this.msgError('未查询到该车辆的运行数据')
				// 		return
				// 	}
				// 	let length = response.data.length
				// 	let middle = -1
				// 	if (length % 2 === 0) {
				// 		middle = length / 2 + 1
				// 	} else {
				// 		middle = (length + 1) / 2
				// 	}
				// 	response.data.forEach(item => {
				// 		let obj = {
				// 			lng: item.longitude,
				// 			lat: item.latitude
				// 		}
				// 		this.path.push(obj)
				// 	})
				// 	this.center = this.path[middle]
				// 	this.startMark = this.path[0]
				// 	this.endMark = this.path[this.path.length - 1]
				// 	this.content = this.queryParams.vehicleLicence
				// 	this.play = true
				// }).catch(error => {

				// })
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm('queryForm')
				this.dateRange = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date()
					.getDate() + ' 00:00:00', new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' +
					new Date().getDate() + ' 23:59:59'
				]
			}
		},
		mounted() {
			// listAllVehicle().then(response => {
			// 	this.vehicleOptions = response.data
			// })
		}
	}
</script>
<style>

</style>
